
<style scoped>
.container {
  box-sizing: border-box;
  display: inline-table;
  border: 1px solid #dcdfe6;
  border-radius: 3%;
  width: 98%;
  height: 30px;
  margin: 1%;
  padding: 0;
  overflow: hidden;
  margin-bottom: 15px;
}
.container label {
  display: table-cell;
  background-color: #f5f7fa;
  border-right: 1px solid #dcdfe6;
  max-width: 200px;
  width: 0.01px;
  height: 100%;
  line-height: 100%;
  margin: 0;
  /* padding: 0 5px; */
  box-sizing: border-box;
  text-align: center;
  vertical-align: center;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  font-size: 110%;
  font-family: "微软雅黑";
}
.container input {
  word-break: keep-all;
  line-height: 100%;
  height: 100%;
  width: 100%;
  padding: 0 3px;
  margin: 0;
  border: 0;
  font-size: 110%;
  font-family: "微软雅黑";
}
.label-padding {
  padding: 0 5px;
}
.div-hidden {
  display: none;
}
</style>

<template>
  <div
    class="container"
    :class="containerBox"
  >
    <label
      :for="id"
      :class="labelBox"
    >
      {{label}}
    </label>
    <input
      :type="type"
      :id="id"
      :name="name"
      :placeholder="placeholder"
      :disabled="disabled"
      :value="value"
      @input="input"
    >
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: "el-input",
  props: ["id", "label", "type", "name", "placeholder", "disabled", "value"],
  data() {
    return {
      // 唯一标识id
      uuid: 'w-' + Math.floor(Math.random() * 16777215).toString(16),
      label: this.label || "",
      id: this.id || this.name || this.uuid,
      name: this.name || "",
      type: this.type || "text",
      placeholder: this.placeholder || "请输入 " + (this.label || "~~"),
      disabled: this.disabled || false,
      value: this.value || "",

      // 样式
      labelBox: {
        "label-padding": !!this.label,
      },
      containerBox: {
        "div-hidden": this.type === "hidden",
      },
    };
  },
  created () {
    // 给元素添加类名。
    this.containerBox[this.uuid] = true
  },
  mounted() {
    var than = this
    // 给元素添加data属性
    $(".container."+ this.uuid+" input").attr("data-" + this.uuid,"")
    $(".container."+ this.uuid+" label").attr("data-" + this.uuid,"")

    // 验证表单
    $(".container."+ this.uuid+" input").on('blur',function(){
      console.log("焦点移开了，开始验证表单~~")
    })
  },
  methods: {
    input(e) {
      this.$emit('input',e.target.value);
    }
  }
};
</script>
